*{
	margin: 0;
	padding: 0;
}
#outSpace{
	background-color:darkslategray;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	/*transform-style: preserve-3d;*/
	perspective: 1000px;
}

.cube{
	width: 200px;
	height: 200px;
	/*border: 1px solid red;*/
	position: relative;
	/*perspective: 1000px;*/
	transform-style: preserve-3d;
	animation: test 3s infinite alternate;
	
}

.side{
	width: 200px;
	height: 200px;
	background-color: black;
	position: absolute;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	
}
.little{
	
	width: 28%;
	height: 28%;
	border-radius: 10px;
	/*padding-top: 10px;*/
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.top{
	transform: rotateX(90deg) translateZ(100px) ;
	
}
.top > div{
	background-color: royalblue;
}

.botton{
	transform: rotateX(-90deg) translateZ(100px);
	
}
.botton > .little{
	background-color: yellow;
}

.left{
	transform: rotateY(-90deg) translateZ(100px);
	 
}
.left > .little{
	background-color: green;
}

.right{
	transform: rotateY(90deg) translateZ(100px);
	
}
.right > .little{
	background-color: orchid;
}

.front{
	transform: translateZ(100px);
	
}
.front > div{
	background-color: salmon;
}


.end{
	transform: translateZ(-100px);
	
}
.end > .little{
	background-color: deeppink;
}

@keyframes test{
	0%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	15%{
		transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
	}
	30%{
		transform: rotateX(45deg) rotateY(90deg) rotateZ(90deg);
	}
	45%{
		transform: rotateX(45deg) rotateY(135deg) rotateZ(135deg);
	}
	60%{
		transform: rotateX(45deg) rotateY(90deg) rotateZ(180deg);
	}
	%75{
		transform: rotateX(45deg) rotateY(45deg) rotateZ(235deg);
	}
	100%{
		transform: rotateX(45deg) rotateY(0deg) rotateZ(270deg);
	}
}